<template>
  <div v-loading="loading">
    <el-row :gutter="5">
      <div
        v-for="(item,index) in canvasList"
        :key="index"
      >
        <el-col
          v-if="editModel || showHidden === '1' || !item.hidden"
          :span="item.spanMultiple * 12"
        >
          <div
            :class="[ item.warnNum > 0 ? 'warn':'', editModel ? 'hidden-border':'item-border','item']"
          >
            <div style="display: flex;">
              <device-explain-icon :explain="item" />
              <div style="flex-grow: 1;margin-left: 5px">
                <div class="primary-color;" style="font-size:14px;line-height: 16px">
                  <el-popover
                    v-if="item.remark && item.remark!==''"
                    placement="top"
                    width="200"
                    trigger="hover"
                    :content="item.name"
                  >
                    <span slot="reference">{{ item.remark }}</span>
                  </el-popover>
                  <span v-else>{{ item.name }}</span>
                </div>
                <div style="font-size:12px;color: #909399;">{{ formatDate(item.valueDate) }}</div>
              </div>
              <div @click="hide(item)">
                <span v-if="editModel">
                  <span v-if="item.hidden" class="el-icon-view" @click.stop="showExplain(item)" />
                  <span v-else class="el-icon-close" @click.stop="hiddenExplain(item)" />
                </span>
              </div>
            </div>
            <div style="position: relative">
              <div
                style="position: absolute;top: 0px;left:25px;font-size: 35px;color: #67bf6e;z-index: 500;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 500px"
              >
                {{ item.value }}<i style="font-size: 10px;line-height: 35px">{{ item.unit }}</i>
              </div>
              <line-chart
                v-if="item.type === 'line'"
                :chart-data="item"
                style="width: 100%;height: 150px"
                :unit="item.unit"
              />
              <multi-line-chart
                v-else-if="item.type === 'line:multi'"
                style="height: 150px;width: 100%;"
                :chart-data="item.data"
              />
            </div>
          </div>
        </el-col>
      </div>
    </el-row>
  </div>
</template>
<script>
import LineChart from './components/LineChart'
import {
  formatDate
} from '@/util/common'
import { listWithExplain } from '@/api/iot/iotDeviceSensorDataApi'
import { updateExplain } from '@/api/iot/iotDeviceExplainApi'
import resize from '@/components/Mixins/resize'
import DeviceExplainIcon from '@/components/DeviceExplainIcon'
import {
  getFilterRepeat,
  getEnableEval
} from '@/util/storage'
import MultiLineChart from './components/MultiLineChart'

export default {
  name: 'SensorData',
  components: {
    LineChart,
    MultiLineChart,
    DeviceExplainIcon
  },
  mixins: [resize],
  props: {
    sensorId: {
      type: Number,
      default: null
    },
    editModel: {
      type: Boolean,
      default: false
    },
    showHidden: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      canvasList: [],
      startTime: null,
      endTime: null,
      loading: false,
      filterRepeat: getFilterRepeat(),
      enableEval: getEnableEval()
    }
  },
  watch: {
    sensorId: {
      deep: true,
      handler(val) {
        if (val != null) {
          this.listWithExplain()
        }
      }
    }
  },
  mounted() {
    const timestamp = Math.round(new Date().getTime() / 1000)
    this.startTime = parseInt((
      Math.round(new Date(new Date().getTime()).getTime() / 1000) -
      1 * 86400
    )
      .toString()
      .substr(0, 10))
    this.endTime = parseInt(timestamp.toString().substr(0, 10))
    this.listWithExplain()
  },
  methods: {
    hiddenExplain(item) {
      const hidden = true
      updateExplain({
        explainId: item.explainId,
        hidden: hidden
      }).then(res => {
        const { code } = res
        if (code === '200') {
          item.hidden = hidden
        }
      })
    },
    showExplain(item) {
      const hidden = false
      updateExplain({
        explainId: item.explainId,
        hidden: hidden
      }).then(res => {
        const { code } = res
        if (code === '200') {
          item.hidden = hidden
        }
      })
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    listWithExplain() {
      this.loading = true
      listWithExplain({
        sensorId: this.sensorId,
        startTime: this.startTime,
        endTime: this.endTime,
        enableEval: this.enableEval === '1',
        filterRepeat: this.filterRepeat === '1'
      }).then(res => {
        const { code, data } = res
        this.loading = false
        if (code === '200') {
          const dataList = data.dataList
          if (data.explainList != null) {
            this.explainList = data.explainList
          } else {
            return
          }
          /**
           * 装换时间
           */
          const checkDX = []

          for (let j = 0; j < dataList.length; j++) {
            const commonTime = formatDate(this, dataList[j].createdTime)
            dataList[j].createdTime = commonTime
            checkDX.push(commonTime)
          }

          const canvasList = []
          let spanMultiple = 1
          for (let i = 0; i < this.explainList.length; i++) {
            const explain = this.explainList[i]
            if (this.enableEval === '1') {
              if (explain.value.length > 6) {
                spanMultiple = 2
              } else {
                spanMultiple = 1
              }
            } else {
              if (explain.rawValue.length > 6) {
                spanMultiple = 2
              } else {
                spanMultiple = 1
              }
            }
            const item = {
              ...explain,
              index: i,
              spanMultiple: spanMultiple
            }
            if (explain.type === 'line') {
              const dy = []
              const dx = []
              for (let j = 0; j < dataList.length; j++) {
                const dataBean = dataList[j].val
                if (Object.prototype.hasOwnProperty.call(dataBean, explain.keyName)) {
                  dy.push(dataBean[explain.keyName])
                  dx.push(dataList[j].createdTime)
                }
              }
              item.dataList = dy
              item.dateList = dx
            } else if (explain.type === 'line:multi') {
              let dataBean
              const xList = []
              const yList = []
              for (let k = 0, l = dataList.length; k < l; k++) {
                dataBean = dataList[k].val
                if (typeof (dataBean[explain.keyName]) !== 'undefined') {
                  xList.push(dataList[k].createdTime)
                  const valList = dataBean[explain.keyName].split(',')
                  for (let n = 0, m = valList.length; n < m; n++) {
                    const yd = valList[n]
                    let have = false
                    for (const yItem of yList) {
                      if (yItem.name === n) {
                        yItem.dataList.push(yd)
                        have = true
                        break
                      }
                    }
                    if (!have) {
                      yList.push({
                        name: n,
                        unit: explain.unit,
                        dataList: [yd]
                      })
                    }
                  }
                }
              }
              item.data = {
                dateList: xList,
                dataList: yList
              }
            } else if (explain.type === 'string') {
              const data = []
              for (let j = 0; j < dataList.length; j++) {
                const dataBean = dataList[j].val
                if (typeof (dataBean[explain.keyName]) !== 'undefined') {
                  data.push({
                    dataList: dataBean[explain.keyName],
                    dateList: dataList[j].createdTime
                  })
                }
              }
              item.data = data
            }
            canvasList.push(item)
          }
          this.canvasList = canvasList
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">

@import '@/styles/element-variables.scss';

.item {
  margin-top: 5px;
  padding: 10px;
  border-color: rgba(0, 0, 0, .1);
  border-width: 1px;
  border-radius: 8px;
  height: 200px;
}

.item-border {
  border-style: solid;
}

.hidden-border {
  border-style: dashed;
}

</style>
